<template>
  <div class="follow-main">
    <div class="follow-header follow-header-info" v-show="status">
      <div class="breadcrumb flex-c-s">
        <p class="item cur">全部粉丝</p>
      </div>

      <el-popover placement="bottom" :width="300" trigger="click">
        <template #default>
          <div class="el-popover"></div>
        </template>
      </el-popover>
    </div>
    <div class="follow-content section">
      <div class="content" style="padding-bottom: 10px;">
        <ul v-for="user in userList" :key="user.userId" class="relation-list">
          <li class="list-item clearfix">
            <div class="cover-container">
              <a :href="userUrl+user.userId" target="_blank" class="up-cover-components">
                <div class="bili-avatar" style="width: 100%;height:100%;">
                  <img
                    class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                    data-src="//i2.hdslb.com/bfs/face/83bb511365da513c55aa3d1958524f3b7db40684.jpg@96w_96h_1c_1s_!web-avatar-space-list.avif"
                    alt
                    :src="preFixUrl+user.userAvatar"
                  />
                  <!-- 大会员头像下标 -->
                  <!-- <span class="bili-avatar-icon bili-avatar-right-icon bili-avatar-icon-personal"></span> -->
                </div>
              </a>
            </div>
            <div class="content">
              <a :href="userUrl+user.userId" target="_blank" class="title">
                <!---->
                <span class="fans-name" style="color: rgb(251, 114, 153);">{{user.userName}}</span>
              </a>
              <p title class="auth-description">{{user.userSign}}</p>
              <!-- <div style="right:10px" class="fans-action">
                <div class="fans-action-btn follow">
                  <a href="#">
                    <i class="icon-back-follow grey"></i>
                    <span class="fans-action-text">关注</span>
                  </a>
                </div>
                <el-popover placement="bottom" popper-class="person_fans_popover" trigger="hover">
                  <div></div>
                  <ul style="left: 0px; top: 0px; transform-origin: center top;" text-align:center>
                    <li class="be-dropdown-item">
                      <a target="_blank" href="/#">发消息</a>
                    </li>
                    <li class="be-dropdown-item">移除粉丝</li>
                  </ul>
                  <el-button
                    style="top:auto;left:-10px;background-color:white;"
                    class="fans-action-text be-dropdown fans-action-btn fans-action-follow fans-action"
                    slot="reference"
                  >
                    <i title="更多操作" class="iconfont icon-ic_more"></i>
                  </el-button>
                </el-popover>
              </div>-->
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "guanzhu",
  userList: "",
  data() {
    return {
      status: true,
      type: "upId",
      userList: "",
      userUrl: "/person/zhuye/",
      preFixUrl: "http://"
    };
  },
  created() {
    this.getFansOrUpList();
  },

  methods: {
    getFansOrUpList() {
     
      this.axios({
        method: "get",
        params: {
          userId: this.$route.params.userId,
          type: this.type
        },
        url: "http://localhost:8090/user/getFansOrUPList"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.userList = res.data;
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    }
  }
};
</script>
<style  scoped>
</style>



